<template>
  <view>
    <view class="zonghe-title">
      <Head1 clasName="padd" icon="index2/quhao" title="四楼综合数据" titleColor="#1B1D20" lineColor="#6891FA" arrowColor="#ffffff" url="/pages/overall/overall"></Head1>
    </view>
    <view class="zonghe-box">
      <view>
        <head2 icon="index2/zonghe1" title="等候区"></head2>
        <DataItem2 clasName="banjian-item" v-for="(item, i) in list" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rateName="item.rateName" :rate="item.rate"></DataItem2>
      </view>
      <view>
        <head2 icon="index2/zonghe2" title="公共区"></head2>
        <DataItem2 clasName="banjian-item public" v-for="(item, i) in lists2" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rateName="item.rateName" :rate="item.rate"></DataItem2>
      </view>
      <view>
        <head2 icon="index2/zonghe3" title="窗口区"></head2>
        <DataItem2 clasName="banjian-item" v-for="(item, i) in lists3" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rateName="item.rateName" :rate="item.rate"></DataItem2>
      </view>
     
    </view>
    <WarnStatistics />
  </view>
</template>
<script setup>
import { ref, onBeforeUnmount, computed } from 'vue'
import Head1 from './head1.vue'
import Head2 from './head2.vue'
import DataItem2 from '@/components/dataItem2/dataItem2.vue'
//import WarnStatistics from '@/pages/overall/components/warn.vue'
import { getPersonSteamByAreaDict, getWarningNumByAreaDict } from '@/api/index-zys.js'
import { getMonitorItemList } from "@/api/index.js"
const list1 = ref({})
const list2 = ref({})
const list3 = ref({})
const task = ref(null);
const opentask = () => {
  getReceiveData().then((data)=> {
    list1.value = data.data;
  })
}
const list = computed(()=> {
  const val =  list1.value;
  return [
	{ icon: '/static/index2/zh1.png', title: '实时人流量', val: val.data ?? 0},
	{ icon: '/static/index2/zh2.png', title: '超时等候', val: val.warningNum ?? 0},
	];
})
const lists2 = computed(()=> {
  const val =  list2.value;
  return [
	{ icon: '/static/index2/zh1.png', title: '本时段区域人数', val: val.data ?? 0},
	{ icon: '/static/index2/zh3.png', title: '人群聚集', val: val.warningNum ?? 0},
];
})
const lists3 = computed(()=> {
  const val =  list3.value;
  return [
	{ icon: '/static/index2/zh4.png', title: '今日事件', val: val.totalNum ?? 0},
	{ icon: '/static/index2/zh5.png', title: '处置完成率', val: val.completionRate ?? 0},
];
})


const getData = () => {
  // 等候区
  getPersonSteamByAreaDict({ areaDict: 'XXDHQ' }).then(res => {
    list1.value.data = res.data
  })
  getWarningNumByAreaDict({ areaDict: 'XXDHQ', typeOid: 27 }).then(res => {
    list1.value.warningNum= res.data?.warningNum
  })


  //公共区
  getPersonSteamByAreaDict({ areaDict: "GGFWQ" }).then((res) => {
		list2.value.data = res.data;
	});
	getWarningNumByAreaDict({ areaDict: "GGFWQ", typeOid: 2 }).then((res) => {
		lists2.value.warningNum = res.data?.warningNum;
	});
  getMonitorItemList({ isPageSearch: true, isToday: true }).then(res => {
    lists3.value = res.data
  })
}
const cleartask = () => {
  if(task.value) {
    clearInterval(task.value);
    task.value = null;
  } 
}
getData();
task.value = setInterval(getData, 1000 * 60 *2);
onBeforeUnmount(cleartask);
</script>
<style lang="scss" scoped>
.zonghe-title {
  margin-top: 20rpx;
}
.zonghe-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  >view {
    flex: 1;
    margin-right: 12rpx;
    background: #fff;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.1);
    border-radius: 0px 0px 5px 5px;
    padding-bottom: 34rpx;
    &:last-of-type {
      margin-right: 0;
    }
  }
 //  .banjian-item {
	// 	display: block;
 //    width: 100%;
 //    margin-left: 22rpx;
 //    margin-top: 32rpx;
	// }
}
:deep(.warn-box) {
  margin-left: 0;
  margin-right: 0;
}
</style>